<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右键菜单插件</title>
    <style>
        html{height: 100%}
    </style>
    <link rel="stylesheet" type="text/css" href="z-UI-plugin/context-menu/css/context-menu.css"/>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-alert/css/z-UI.alert.css"/>
    <script src="jquery.min.js"></script>
    <script src="z-UI.js"></script>
    <script src="z-UI-alert/js/z-UI.alert.js"></script>
    <script src="z-UI-plugin/context-menu/js/context-menu.js"></script>
    <style>
        body{margin: 0}
        .menu-div{border: 1px dotted black;width: 100px;height: 100px;margin: 35px 80px;}
        .p20{padding: 10px 20px;}
    </style>
</head>
<body class="zUI-app">
    <div class="zUI-full" style="overflow-y: auto">
        <h3 class="p20">效果预览</h3>

        <div style="margin: 0;display: flex;flex-direction: row">
            <div class="p20">
                <div id="menu1" class="menu-div">
                    原始样式
                </div>
            </div>
            <div class="p20">
                <div id="menu2" class="menu-div">
                    包含二级菜单
                </div>
            </div>
        </div>
        <div style="margin: 0;display: flex;flex-direction: row">
            <div class="p20">
                <div id="menu3" class="menu-div">
                    带图标
                </div>
            </div>
            <div class="p20">
                <div id="menu4" class="menu-div">
                    禁用选项
                </div>
            </div>
        </div>


        <br>
        <h3 class="p20">动态修改选项</h3>
        <div class="p20">如果需要动态修改禁用属性,或者修改选项，只需重新调用mouseMenu方法，设置disabled属性即可</div>
        <h3 class="p20">皮肤</h3>
        <div class="p20">设置skin属性，支持black、<span style="color: #337ab7">blue</span>、<span style="color: #009688">green</span>
            、<span style="color: darkorange">orange</span>四种，默认为black<br>
            如果需要设置其他颜色，只需要增加如下css样式：
            <pre>
            <script>
                document.write(zUI.util.htmlEncode("\n\t$(\"#menu1\").mouseMenu({\n" +
                    "        skin: 'mySkin',\n" +
                    "        options:[]\n" +
                    "    });"));
            </script>
        </pre>
            <pre>
            <script>
                document.write(zUI.util.htmlEncode("\n\t.contextmenu-default.mySkin>li:hover>a{\n" +
                    "\t\tbackground: #009688;\n" +
                    "\t\tcolor: white;\n" +
                    "\t}\n" +
                    "\t.contextmenu-default.mySkin>li:hover>a.disabled{\n" +
                    "\t\tbackground: #119688;\n" +
                    "\t\tcolor: lightgray;\n" +
                    "\t}"));
            </script>
        </pre>
        </div>
        <h3 class="p20">调用</h3>
        <pre class="p20">
        <script>
            document.write(zUI.util.htmlEncode("<div id=\"menu4\">\n" +
                "       原始样式\n" +
                "\t</div>\n\n"));
            document.write(zUI.util.htmlEncode("\t$(\"#menu4\").mouseMenu({\n" +
                "        //皮肤\n" +
                "        skin:'green',\n" +
                "        //字体大小\n" +
                "        size:'sm',\n" +
                "        //下拉选项\n" +
                "        options:[\n" +
                "            {\n" +
                "                title:'刷新',\n" +
                "                //子菜单会自动禁用\n" +
                "                disabled: true,\n" +
                "                //图标\n" +
                "                icon:'<i class=\"fa fa-refresh\"></i>',\n" +
                "                //点击回调\n" +
                "                click:function(e){},\n" +
                "                //二级菜单\n" +
                "                child:[\n" +
                "                    {\n" +
                "                        title:'刷新当前',\n" +
                "                        icon:'<i class=\"fa fa-android\"></i>'},\n" +
                "                    {\n" +
                "                        title:'刷新全部',\n" +
                "                        icon:'<i class=\"fa fa-apple\"></i>'\n" +
                "                    },\n" +
                "                ]\n" +
                "            },{\n" +
                "                title:'锁定',icon:'<i class=\"fa fa-lock\"></i>'\n" +
                "            },{\n" +
                "                title:'关闭',\n" +
                "                icon:'<i class=\"fa fa-close\"></i>',\n" +
                "                child:[\n" +
                "                    {\n" +
                "                        title:'关闭当前',\n" +
                "                        icon:'<i class=\"fa fa-camera\"></i>'\n" +
                "                    },\n" +
                "                    {\n" +
                "                        title:'关闭其它',\n" +
                "                        icon:'<i class=\"fa fa-calendar\"></i>'\n" +
                "                    },\n" +
                "                    {\n" +
                "                        title:'全部关闭',\n" +
                "                        disabled: true,\n" +
                "                        icon:'<i class=\"fa fa-database\"></i>'\n" +
                "                    }\n" +
                "                ],\n" +
                "\n" +
                "            },{\n" +
                "                title:'新窗口打开',\n" +
                "                icon:'<i class=\"fa fa-plus\"></i>'\n" +
                "            },\n" +
                "        ],\n" +
                "        afterInit: function (ul) {\n" +
                "            setTimeout(function(){\n" +
                "                ul.css({'top':100,'left':710}).show();\n" +
                "            },1000);\n" +
                "\n" +
                "        },\n" +
                "        //菜单被手动显示后调用\n" +
                "        onHandMenu: function(ul,e){\n" +
                "            zUI.dialog.alert('手动点击显示菜单');\n" +
                "        }\n" +
                "    });"))
        </script>
    </pre>
    </div>
</body>
<script>

    $("#menu1").mouseMenu({
        skin:'blue2',
        options:[
            {title:'刷新',click:function(){
                    zUI.dialog.alert('刷新');
                }},
            {title:'锁定',click:function(){
                    zUI.dialog.alert('锁定');
                }},
            {title:'关闭',click:function(){
                    zUI.dialog.alert('关闭');
                }},
            {title:'新窗口打开',click:function(){
                    zUI.dialog.alert('新窗口打开');
                }},
        ],
        afterInit: function (ul) {
            setTimeout(function(){
                var d = $("#menu1").offset();
                ul.css({'top':d.top+50,'left':d.left+50}).show();
            },100);
        }
    });
    $("#menu2").mouseMenu({
        skin:'blue',
        size:'sm',
        options:[
            {title:'刷新',child:[
                    {title:'刷新当前',click:function(){
                            zUI.dialog.alert('刷新当前');
                        }},
                    {title:'刷新全部',click:function(){
                            zUI.dialog.alert('刷新全部');
                        }},
                ]},
            {title:'锁定'},
            {title:'关闭',child:[
                    {title:'关闭当前'},
                    {title:'关闭其它'},
                    {title:'全部关闭'}
                ]},
            {title:'新窗口打开'},
        ],
        afterInit: function (ul) {
            setTimeout(function(){
                var d = $("#menu2").offset();
                ul.css({'top':d.top+50,'left':d.left+50}).show();
            },600);

        }
    });
    $("#menu3").mouseMenu({
        skin:'orange',
        options:[
            {
                title:'刷新',
                icon:'<i class="fa fa-refresh"></i>',
                child:[
                    {title:'刷新当前',disabled: true,click:function(){
                            zUI.dialog.alert('刷新当前');
                        }},
                    {title:'刷新全部',click:function(){
                            zUI.dialog.alert('刷新全部');
                        }},
                ]
            },{
                title:'锁定',icon:'<i class="fa fa-lock"></i>'
            },{
                title:'关闭',
                child:[
                    {title:'关闭当前'},
                    {title:'关闭其它'},
                    {title:'全部关闭'}
                ],
                icon:'<i class="fa fa-close"></i>'
            },{
                title:'新窗口打开',
                icon:'<i class="fa fa-plus"></i>'
            },
        ],
        afterInit: function (ul) {
            setTimeout(function(){
                var d = $("#menu3").offset();
                ul.css({'top':d.top+50,'left':d.left+50}).show();
            },800);

        }
    });
    $("#menu4").mouseMenu({
        skin:'green',
        size:'sm',
        options:[
            {
                title:'刷新',
                //子菜单会自动禁用
                disabled: true,
                icon:'<i class="fa fa-refresh"></i>',
                child:[
                    {
                        title:'刷新当前',
                        icon:'<i class="fa fa-android"></i>'},
                    {
                        title:'刷新全部',
                        icon:'<i class="fa fa-apple"></i>'
                    },
                ]
            },{
                title:'锁定',icon:'<i class="fa fa-lock"></i>'
            },{
                title:'关闭',
                icon:'<i class="fa fa-close"></i>',
                child:[
                    {
                        title:'关闭当前',
                        icon:'<i class="fa fa-camera"></i>'
                    },
                    {
                        title:'关闭其它',
                        icon:'<i class="fa fa-calendar"></i>'
                    },
                    {
                        title:'全部关闭',
                        disabled: true,
                        icon:'<i class="fa fa-database"></i>'
                    }
                ],

            },{
                title:'新窗口打开',
                icon:'<i class="fa fa-plus"></i>'
            },
        ],
        afterInit: function (ul) {
            setTimeout(function(){
                var d = $("#menu4").offset();
                ul.css({'top':d.top+50,'left':d.left+50}).show();
            },1000);

        },
        //菜单被手动显示后调用
        onHandMenu: function(ul,e){
            zUI.dialog.alert('手动点击显示菜单');
        }
    });


</script>
</html>